﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>上下切换</title>
<style>
body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd,td,th,form,input,select,textarea{margin:0;padding:0; font-size:12px;}
a{text-decoration:none;outline:none;}
img{vertical-align:top;border:none;}
li{list-style:none;}
table{border-collapse:collapse;}
textarea{resize:none; outline:none; overflow:auto;}

.clear{zoom:1;}
.clear:after{content:''; display:block;clear:both;}
/* css reset */
#ul1{position:absolute;}
#ul1 li{position:absolute;}
#ul2{height:20px; position:absolute;top:140px;left:350px;}
#div1{width:490px;height:170px;margin:50px auto;border:2px solid #999;position:relative;overflow:hidden;}
#ul2 li{float:left;height:20px;line-height:20px;width:20px;background:#FFF;color:#FF8000;border:1px solid #999;text-align:center;margin:0 3px;}
#ul2 .active{color:#fff;background:#FF8000;}

#page{position:absolute;top:400px;left:50%;margin-left:-75px;}
#page li{float:left;width:30px;height:20px;}
#page li a{font-size:14px;}
#page li a:link{color:#000;}
#page li a:visited{color:#06F;}
#page li a:hover{text-decoration:underline;}
#page li a:active{color:#EF1B7A}

#work{height:80px;width:64px;background:url(img/intro.png);position:absolute;top:50%;left:20px;}
#mask{height:100%;width:100%;position:absolute;top:0;left:0;background: #000; opacity: 0.7;filter:alpha(opacity=70);display:none;z-index:10000;}
#wMenu{/*height:500px;*/height:0px;width:0px;border:10px solid #fff;border-bottom:40px solid #fff;background:url(img/wbg.png) no-repeat;position:absolute;top:0;left:0;display:none;z-index:10001;}
.list{color:#666;position:relative;opacity:0;filter:alpha(opacity=0);}
.list a{color:#333;}
.list a:visited{color:#055AAF;}
.list a:hover{color:#055AAF;text-decoration:underline;}
.list a:active{color:#006;}
.list dl{padding:8px 8px; }
.list dt{height:20px;line-height:20px;font-size:18px;font-weight:bold;}
.list dd{line-height:20px;font-size:14px;}
.list .close{width:66px;height:22px;position:absolute;top:540px;right:10px;background:url(img/closelabel.gif);}
.list p{line-height:14px;font-size:12px;color:#00F;font-weight:bold;padding:8px 8px;}

/* work introduction */
</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload=function(){
	var oDiv=document.getElementById('div1');
	var oUl1=document.getElementById('ul1');
	var oUl2=document.getElementById('ul2');
	var aLi1=oUl1.getElementsByTagName('li');
	var aLi2=oUl2.getElementsByTagName('li');
	var timer=null;
	var iNow=0;//记录现在正在显示的图片代号
	var iNow2=0;//记录下一个要显示的图片代号
	var iNum=1;
	autoPlay();
	for(var i=1;i<aLi1.length;i++){
		aLi1[i].style.top="170px";
	}
	
	for(var i=0;i<aLi2.length;i++){
		aLi2[i].index=i;
		aLi2[i].onmouseover=function(){
			iNow2=this.index;
			fnChange();
		
		}
	
	}
	
	oDiv.onmouseover=function(){
		clearInterval(timer);
	
	}
	oDiv.onmouseout=function(){
		autoPlay();
	
	}
	
	function fnChange(){
		if(iNow2>iNow){
			aLi1[iNow2%5].style.top="170px";
			startMove(aLi1[iNow%5],{top:-170});
		}else{
			aLi1[iNow2%5].style.top="-170px";
			startMove(aLi1[iNow%5],{top:170});
		}
		startMove(aLi1[iNow2%5],{top:0})
		
		for(var i=0;i<aLi2.length;i++){
			aLi2[i].className='';
		}
		aLi2[iNow2%5].className='active';
		iNow=iNow2;
	}
	
	
	
	function autoPlay(){
		
		timer=setInterval(function(){
			if(iNow==aLi1.length-1){
				iNum=-1
			}else if(iNow==0){
				iNum=1;
			}
			iNow2+=iNum;
			fnChange();	
		},1500)
	}
	
	
	var workIntro=(function(){
		var oWork=document.getElementById('work');
		var oMask=document.getElementById('mask');
		var oMenu=document.getElementById('wMenu');
		var oList=getByClass('list')[0];
		var oClose=getByClass('close')[0];
		function rePos(){
			bindEvent(window,'resize',menuMove);
			bindEvent(window,'scroll',menuMove);
			function menuMove(){
				var iH=Math.max(viewH(),scrollH());
				var iLeft=Math.ceil((viewW()-oMenu.offsetWidth)/2);
				var iTop=Math.ceil((viewH()-oMenu.offsetHeight)/2+scrollY());
				oMask.style.height=iH+'px';
				startMove(oMenu,{top:iTop,left:iLeft})
			
			}
		}
		
		function btnClick(){
			oWork.onclick=function(){			
				oMask.style.display='block';
				oMenu.style.display='block';
				oMenu.style.left=(viewW()-oMenu.offsetWidth)/2+'px';
				oMenu.style.top=(viewH()-oMenu.offsetHeight)/2+'px';
				iLs=Math.ceil((viewW()-450)/2);
				iTs=Math.ceil((viewH()-590)/2);
				startMove(oMenu,{height:540,top:iTs},function(){
					startMove(oMenu,{width:430,left:iLs},function(){
						startMove(oList,{opacity:100});
					});
				});
			}
		
		};
		
		function closeClick(){
			oClose.onclick=function(){
				oList.style.opacity=0;
				oList.style.filter = 'alpha(opacity=' +0+ ')';
				oMenu.style.top=0;
				oMenu.style.height=0;
				oMenu.style.width=0;
				oMask.style.display='none';
				oMenu.style.display='none';
				
			}
		}
		
		return{
			c:closeClick,
			b:btnClick,
			r:rePos
		}
	})();
	workIntro.c();
	workIntro.b();
	workIntro.r();

}


</script>
</head>

<body>
<div id="div1">
	<ul id="ul1">
        <li><img src="1.png" alt=""/></li>
        <li><img src="2.jpg" alt=""/></li>
        <li><img src="3.png" alt=""/></li>
        <li><img src="4.jpg" alt=""/></li>
        <li><img src="5.jpg" alt=""/></li>
	</ul>
    <ul id="ul2">
    	<li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<ul id="page">
	<li><a href="#">【1】</a></li>
    <li><a href="2.html">【2】</a></li>
    <li><a href="3.html">【3】</a></li>
    <li><a href="4.html">【4】</a></li>
    <li><a href="5.html">【5】</a></li>
</ul>

<div id="work"></div>
<div id="mask"></div>
<div id="wMenu">
	<div class="list">
        <dl>
            <dt><a href="../../index.html">1.模仿360新建页制作JS效果</a></dt>
            <dd>a)用JsonP跨域请求百度数据，制作搜索框；</dd>
            <dd>b)用Ajax制作天气预报效果；</dd>
            <dd>c)制作更换背景功能，并记录cookie；</dd>
            <dd>d)动态设置图片格子数，并记录cookie；</dd>
            <dd>e)图片可任意交换位置，可随机交换位置；</dd>
            <dd>f)制作图片格子内部轮播图效果。</dd>
        </dl>
        <dl>
            <dt><a href="../b.qq/index.html">2.模仿企业QQ整站</a></dt>
            <dd>a)标签的选择方面，注重标签的语义化</dd>
            <dd>b)CSS命名方面，运用加前缀的方法区分样式所属页面、避免冲突；</dd>
            <dd>c)CSS样式规划方面，考虑扩展性，多用组合，少用继承。</dd>
            <dd>e)处理各浏览器的兼容问题，兼容IE6~10，firefox，chrome等。</dd>
        </dl>
        <dl>
            <dt><a href="../UC/index.html">3.模仿UC首页</a></dt>
            <dd>a)用JS原生实现首页所有效果</dd>
            <dd>b)用运动框架制作首页轮播图、网站地图以及下拉菜单</dd>
        </dl>
        <dl>
            <dt>4.零散demo</dt>
            <dd><a href="../magnifier/index.html">a)放大镜效果；</a></dd>
            <dd><a href="../jumpMenu/index.html">b)可拖拽弹性跳动窗口；</a></dd>
            <dd><a href="../appleMenu/index.html">c)苹果菜单效果</a></dd>
            <dd><a href="1.html">d)常见轮播图效果合集</a></dd>
			<dd><a href="../delay/delay.html">e)延迟加载效果</a></dd>
        </dl>
        <p>说明：此网站内各模仿页面仅用来展示个人作品，不用于任何商业用途</p>
        <div class="close"></div>
    </div>
</div>
</body>
</html>
